itstructure /
yii2-template-multilanguage
| Conditions | 1 |
| Paths | 2 |
| Total Lines | 194 |
| Code Lines | 116 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | CKEDITOR.dialog.add('pbckcodeDialog', function(editor) { |
||
|
|
|||
| 2 | var tab_sizes = ['1', '2', '4', '8']; |
||
| 3 | |||
| 4 | // CKEditor variables |
||
| 5 | var dialog; |
||
| 6 | var shighlighter = new PBSyntaxHighlighter(editor.settings.highlighter); |
||
| 7 | |||
| 8 | // ACE variables |
||
| 9 | var aceEditor, aceSession, whitespace; |
||
| 10 | |||
| 11 | // EDITOR panel |
||
| 12 | var editorPanel = { |
||
| 13 | id: 'editor', |
||
| 14 | label: editor.lang.pbckcode.editor, |
||
| 15 | elements: [ |
||
| 16 | { |
||
| 17 | type: 'hbox', |
||
| 18 | children: [ |
||
| 19 | { |
||
| 20 | type: 'select', |
||
| 21 | id: 'code-select', |
||
| 22 | className: 'cke_pbckcode_form', |
||
| 23 | label: editor.lang.pbckcode.mode, |
||
| 24 | items: editor.settings.modes, |
||
| 25 | 'default': editor.settings.modes[0][1], |
||
| 26 | setup: function(element) { |
||
| 27 | if (element) { |
||
| 28 | element = element.getAscendant('pre', true); |
||
| 29 | this.setValue(element.getAttribute('data-pbcklang')); |
||
| 30 | } |
||
| 31 | }, |
||
| 32 | commit: function(element) { |
||
| 33 | if (element) { |
||
| 34 | element = element.getAscendant('pre', true); |
||
| 35 | element.setAttribute('data-pbcklang', this.getValue()); |
||
| 36 | } |
||
| 37 | }, |
||
| 38 | onChange: function() { |
||
| 39 | aceSession.setMode('ace/mode/' + this.getValue()); |
||
| 40 | } |
||
| 41 | }, |
||
| 42 | { |
||
| 43 | type: 'select', |
||
| 44 | id: 'code-tabsize-select', |
||
| 45 | className: 'cke_pbckcode_form', |
||
| 46 | label: editor.lang.pbckcode.tabSize, |
||
| 47 | items: tab_sizes, |
||
| 48 | 'default': editor.settings.tab_size, |
||
| 49 | setup: function(element) { |
||
| 50 | if (element) { |
||
| 51 | element = element.getAscendant('pre', true); |
||
| 52 | this.setValue(element.getAttribute('data-pbcktabsize')); |
||
| 53 | } |
||
| 54 | }, |
||
| 55 | commit: function(element) { |
||
| 56 | if (element) { |
||
| 57 | element = element.getAscendant('pre', true); |
||
| 58 | element.setAttribute('data-pbcktabsize', this.getValue()); |
||
| 59 | } |
||
| 60 | }, |
||
| 61 | onChange: function(element) { |
||
| 62 | if (element) { |
||
| 63 | whitespace.convertIndentation(aceSession, ' ', this.getValue()); |
||
| 64 | aceSession.setTabSize(this.getValue()); |
||
| 65 | } |
||
| 66 | } |
||
| 67 | } |
||
| 68 | ] |
||
| 69 | }, |
||
| 70 | { |
||
| 71 | type: 'html', |
||
| 72 | html: '<div></div>', |
||
| 73 | id: 'code-textarea', |
||
| 74 | className: 'cke_pbckcode_ace', |
||
| 75 | style: 'position: absolute; top: 80px; left: 10px; right: 10px; bottom: 50px;', |
||
| 76 | setup: function(element) { |
||
| 77 | // get the value of the editor |
||
| 78 | var code = element.getHtml(); |
||
| 79 | |||
| 80 | // replace some regexp |
||
| 81 | code = code.replace(new RegExp('<br/>', 'g'), '\n') |
||
| 82 | .replace(new RegExp('<br>', 'g'), '\n') |
||
| 83 | .replace(new RegExp('<', 'g'), '<') |
||
| 84 | .replace(new RegExp('>', 'g'), '>') |
||
| 85 | .replace(new RegExp('&', 'g'), '&') |
||
| 86 | .replace(new RegExp(' ', 'g'), ' '); |
||
| 87 | |||
| 88 | aceEditor.setValue(code); |
||
| 89 | }, |
||
| 90 | commit: function(element) { |
||
| 91 | element.setText(aceEditor.getValue()); |
||
| 92 | } |
||
| 93 | } |
||
| 94 | ] |
||
| 95 | }; |
||
| 96 | |||
| 97 | // dialog code |
||
| 98 | return { |
||
| 99 | // Basic properties of the dialog window: title, minimum size. |
||
| 100 | title: editor.lang.pbckcode.title, |
||
| 101 | minWidth: 600, |
||
| 102 | minHeight: 400, |
||
| 103 | // Dialog window contents definition. |
||
| 104 | contents: [ |
||
| 105 | editorPanel |
||
| 106 | ], |
||
| 107 | onLoad: function() { |
||
| 108 | dialog = this; |
||
| 109 | // we load the ACE plugin to our div |
||
| 110 | aceEditor = ace.edit(dialog.getContentElement('editor', 'code-textarea') |
||
| 111 | .getElement().getId()); |
||
| 112 | // save the aceEditor into the editor object for the resize event |
||
| 113 | editor.aceEditor = aceEditor; |
||
| 114 | |||
| 115 | // set default settings |
||
| 116 | aceEditor.setTheme('ace/theme/' + editor.settings.theme); |
||
| 117 | aceEditor.setHighlightActiveLine(true); |
||
| 118 | aceEditor.setShowInvisibles(true); |
||
| 119 | |||
| 120 | aceSession = aceEditor.getSession(); |
||
| 121 | aceSession.setMode('ace/mode/' + editor.settings.modes[0][1]); |
||
| 122 | aceSession.setTabSize(editor.settings.tab_size); |
||
| 123 | aceSession.setUseSoftTabs(true); |
||
| 124 | |||
| 125 | // load ace extensions |
||
| 126 | whitespace = ace.require('ace/ext/whitespace'); |
||
| 127 | }, |
||
| 128 | onShow: function() { |
||
| 129 | // get the selection |
||
| 130 | var selection = editor.getSelection(); |
||
| 131 | // get the entire element |
||
| 132 | var element = selection.getStartElement(); |
||
| 133 | |||
| 134 | // looking for the pre parent tag |
||
| 135 | if (element) { |
||
| 136 | element = element.getAscendant('pre', true); |
||
| 137 | } |
||
| 138 | // if there is no pre tag, it is an addition. Therefore, it is an edition |
||
| 139 | if (!element || element.getName() !== 'pre') { |
||
| 140 | element = new CKEDITOR.dom.element('pre'); |
||
| 141 | |||
| 142 | if (shighlighter.getTag() !== 'pre') { |
||
| 143 | element.append(new CKEDITOR.dom.element('code')); |
||
| 144 | } |
||
| 145 | this.insertMode = true; |
||
| 146 | } |
||
| 147 | else { |
||
| 148 | if (shighlighter.getTag() !== 'pre') { |
||
| 149 | element = element.getChild(0); |
||
| 150 | } |
||
| 151 | this.insertMode = false; |
||
| 152 | } |
||
| 153 | // get the element to fill the inputs |
||
| 154 | this.element = element; |
||
| 155 | |||
| 156 | // focus on the editor |
||
| 157 | aceEditor.focus(); |
||
| 158 | |||
| 159 | // we empty the editor |
||
| 160 | aceEditor.setValue(''); |
||
| 161 | |||
| 162 | // we fill the inputs |
||
| 163 | if (!this.insertMode) { |
||
| 164 | this.setupContent(this.element); |
||
| 165 | } |
||
| 166 | }, |
||
| 167 | // This method is invoked once a user clicks the OK button, confirming the dialog. |
||
| 168 | onOk: function() { |
||
| 169 | var pre, element; |
||
| 170 | pre = element = this.element; |
||
| 171 | |||
| 172 | if (this.insertMode) { |
||
| 173 | if (shighlighter.getTag() !== 'pre') { |
||
| 174 | element = this.element.getChild(0); |
||
| 175 | } |
||
| 176 | } |
||
| 177 | else { |
||
| 178 | pre = element.getAscendant('pre', true); |
||
| 179 | } |
||
| 180 | |||
| 181 | this.commitContent(element); |
||
| 182 | |||
| 183 | // set the full class to the code tag |
||
| 184 | shighlighter.setCls(pre.getAttribute('data-pbcklang') + ' ' + editor.settings.cls); |
||
| 185 | |||
| 186 | element.setAttribute('class', shighlighter.getCls()); |
||
| 187 | |||
| 188 | // we add a new code tag into ckeditor editor |
||
| 189 | if (this.insertMode) { |
||
| 190 | editor.insertElement(pre); |
||
| 191 | } |
||
| 192 | } |
||
| 193 | }; |
||
| 194 | }); |
||
| 195 | |||
| 206 |
Loading history...
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.